<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
</head>
<body>
    <div>
        <p>所有HTML元素都可以看作盒子，在CSS中，box model这一术语是用来设计和布局使用</p>
        <p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，包括：外边距（margin）、边框（border）、内边距（padding）、和实际内容（content）。</p>
        <p>边框：粗细 边框样式 颜色</p>
        <p><br>元素的总宽度计算公式是这样的：</p>
        <p>总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距</p>
        <p>元素的总高度最终计算公式是这样的：</p>
        <p>总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距</p>
    </div>
</body>
</html>